<template>
    <div>
        <van-nav-bar title="支付方式" left-arrow @click-left="backUp"/>
        <main>
            <section class="order-info">
                <p style="text-align: center">订单编号{{orderInfo.orderNo}}</p>
                <p style="text-align: center;margin-top: 20px">订单金额</p>
                <h4>&yen;{{format(orderInfo.payment)}}</h4>
            </section>
            <van-radio-group v-model="radio">
                <van-cell-group>
                    <van-cell clickable @click="radio = '1'">
                        <img src="../../assets/imgList/alipay.jpg"/>
                        <van-radio name="1" checked-color="#FBA86F">支付宝支付</van-radio>
                    </van-cell>
                    <van-cell clickable @click="radio = '2'">
                        <img src="../../assets/imgList/weixinpay.jpg"/>
                        <van-radio name="2" checked-color="#FBA86F">微信支付</van-radio>
                    </van-cell>
                </van-cell-group>
            </van-radio-group>
            <button @click="pay">确认支付</button>
        </main>
    </div>
</template>
<script>
    import {RadioGroup, Radio, Cell, CellGroup} from "vant";
    import url from "@/utils/api_data.js";

    export default {
        components: {
            [RadioGroup.name]: RadioGroup,
            [Radio.name]: Radio,
            [CellGroup.name]: CellGroup,
            [Cell.name]: Cell
        },
        data() {
            return {
                radio: "1",
                orderInfo: {
                    orderNo: this.$route.params.orderInfo.id,
                    payment: this.$route.params.orderInfo.paymentPrice
                }
            };
        },
        methods: {
            backUp() {
                this.$router.go(-1);
            },
            pay() {
                if (this.radio == 2) {
                    // 线下支付  跳转到全部订单列表
                    this.$dialog
                        .confirm({
                            title: "确认支付",
                            message: "微信暂未开通，是否线下支付？"
                        })
                        .then(() => {
                            this.$toast("您已选择线下支付，现在为您跳转到订单列表");
                            this.$router.push({path: "userorder/100"});
                            // on confirm
                        })
                        .catch(() => {
                            // on cancel
                        });
                } else {
                    // 支付宝支付接口需重做
                    this.$axios({
                        method: "get",
                        url: url.aliPay,
                        params: {
                            orderNo: this.orderInfo.orderNo
                        }
                    }).then(res => {
                        console.log(res);
                        const div = document.createElement('div');
                        div.innerHTML = res;
                        document.body.appendChild(div);
                        document.forms[0].submit();
                    });
                }
            },
            format(price) {
                return ((price * 100) / 100).toFixed(2);
            }
        },
        mounted() {
        }
    };
</script>
<style lang="less" scoped>
    @import "~style/common.less";

    main {
        height: calc(100vh - 50px);
    }

    .order-info {
        margin-top: 1px;
        padding: 15px 21px 32px;
        box-sizing: border-box;
        height: 190px;
        background-color: @bgColor;

        p {
            .font-dpr(14px);
            color: @fontColorH3;
        }

        h4 {
            margin-top: 21px;
            color: #ec6e6b;
            text-align: center;
            .font-dpr(24px);
        }
    }

    .van-cell-group {
        margin-top: 2px;
        background-color: @borderColor;
        .flexbox();
        // border: 1px solid red;
        .van-cell {
            .flexbox(center, center, row, nowrap);

            img {
                width: 120px;
                height: 40px;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
            }
        }

        .van-cell + .van-cell {
            margin-left: 2px;
        }

        .van-radio {
            margin-top: 5px;
            text-align: center;
            // border: 1px solid blue;
            &__input {
                height: 1.2em !important;
            }
        }
    }

    button {
        display: block;
        width: 80%;
        margin: 80px auto 0;
        height: 45px;
        background-color: @priColor;
        border-radius: 45px;
        color: #fff;
        .font-dpr(16px);
    }
</style>